@import '~ant-design-vue/es/style/themes/default.less';

// header
@header-background: #2c2c2c;
@header-color: #e4e4e4;
//@header-height: 30px;

// attribute-pane
@attribute-pane-width: 20%;
@attribute-pane-background: #f5f5f5;

// side-bar
@side-bar-width: 15%;

// tabs
@tab-inactive-color: #979797;

// main
//@main-height: calc(100% - @header-height);

// header
.header {
  background: @header-background;
  color: @header-color;
  //height: @header-height;
  width: 100%;
}

// side-bar
.side-bar {
  min-width: @side-bar-width;
}

// attribute-bar
.attribute-bar {
  background: @attribute-pane-background;
}
.attribute-wrapper {
  padding: 12px 14px;
  border-bottom: 2px solid #e6e6e6;
  display: flex;
  justify-content: space-between;
}
.attribute-title {
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  opacity: 1;
  color: #606266;
}
.attribute-arg-wrapper{

}
.attribute-arg-title {
  color: #888888;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
}
.attribute-value {
  width: 100%;
}

// attribute-form
/deep/ .el-form-item--mini .el-form-item__content,
.el-form-item--mini .el-form-item__label {
  line-height: 17px;
}
/deep/ .el-form--label-top .el-form-item__label {
  float: none;
  display: inline-block;
  text-align: left;
  /* padding: 0 0 10px; */
}
/deep/ .el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 12px;
  color: #888888;
  line-height: 30px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/deep/.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin: 5px 0;
}

// context-menu
.contextmenu {
  width: 140px;
  margin: 0;
  background: #eaeaea;
  position: absolute;
  list-style-type: none;
  padding: 4px 0;
  font-size: 14px;
  color: @header-background;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 #b2b2b2;
  display: flex;
  flex-direction: column;
}

.contextmenu li {
  margin: 0;
  padding: 2px 22px;
}

.contextmenu li:hover {
  background: #bababa;
  cursor: pointer;
}

.contextmenu li button {
  color: #2c3e50;
  width: 100%;
  text-align: left;
}

